<template>
  <CustomNav title="套餐" :isShowBack="false"></CustomNav>
  <Search btnTitle="搜索" fixed />

  <view class="comboMeal">套餐</view>

  <!-- 综合 -->
  <view class="comprehensiveContainer" v-if="false">
    <view class="comprehensive">
      <van-tabs :active="0" color="#FFB61E">
        <van-tab title="综合"></van-tab>
      </van-tabs>
    </view>
    <view class="salesVolume">
      <view class="txt">价格</view>
      <!-- <i class="iconfont icon-shangxiajiantou"></i> -->
      <view class="icon">
        <i class="iconfont icon-_31fanhui1"></i>
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>
  </view>

  <view class="container">
    <view class="awp">
      <view class="row" v-for="(item, index) in comboMealList" :key="index">
        <view class="img" @click="handleClick(item.id)">
          <u-image
            :show-loading="true"
            :src="item.poster"
            width="345rpx"
            height="345rpx"
          >
            <template v-slot:loading>
              <u-loading-icon color="#ccc"></u-loading-icon>
            </template>
            <template #error>
              <view style="font-size: 24rpx">加载失败</view>
            </template>
          </u-image>
        </view>
        <view class="oneComboMeal">{{ item.name }}</view>
        <view class="info">
          <view class="money">￥{{ item.rent }}</view>
          <view class="love" @click="handleLove">
            <u-icon name="heart" color="#A5A5A5" size="30rpx"></u-icon>
            <view class="count">{{ item.likedCount }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多/没有更多了 -->
    <view class="wrap" v-if="comboMealList.length">
      <u-loadmore :status="status" :loading-text="loadingText" />
    </view>
  </view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import Search from "@/components/Search/index.vue";
import { Alert, unAlert } from "@/utils/tool";
import { comboMeal, giveLove } from "@/api/comboMeal";

// 改变status即可
const status = ref("轻轻上拉");
const loadingText = ref("努力加载中");

onMounted(() => {
  getComboMeal();
});

// 套餐数据
const comboMealList = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getComboMeal = async () => {
  if (comboMealList.value.length) {
    // 获取了数据
    // 没有更多了
    if (comboMealList.value.length >= total.value) {
      console.log("没有数据了");
      status.value = "nomore";
      return;
    }
  }

  const result = await comboMeal(pageNo.value, pageSize.value);
  console.log("result：", result);

  total.value = result.data.data.total;

  if (comboMealList.value) {
    comboMealList.value = [...comboMealList.value, ...result.data.data.result];
    console.log("拼接数据中...");
  }
};

// 下拉刷新
// onPullDownRefresh(() => {
//   Alert("加载中...", "loading", 0, true);
//   comboMealList.value = [];
//   pageNo.value = 0;
//   getComboMeal();
//   // 关闭下拉刷新
//   uni.stopPullDownRefresh();
//   unAlert();
// });

// 页面触底了
onReachBottom(() => {
  status.value = "loading";
  // console.log('李佳怡你个坏蛋!!!')
  pageNo.value++;

  getComboMeal();
  unAlert();
});

// 查看详情
const handleClick = (id) => {
  uni.navigateTo({
    url: `/pagesC/comboMealDetails/index?id=${id}`,
  });
};

// 点赞
const handleLove = () => {
  console.log("你好");
  // const
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.comboMeal {
  width: 100%;
  height: 70rpx;
  border-bottom: 4px solid #ffb61e;
  text-align: center;
  color: #ffb61e;
  font-size: 34rpx;
  font-weight: 800;
  // line-height: 150rpx;
}

.comprehensiveContainer {
  display: flex;
  justify-content: space-evenly;
  // margin-bottom: 30rpx;
  // margin-top: 120rpx;
  padding-top: 10rpx;
  background-color: #efefef;

  .comprehensive {
    :deep(.van-tabs__scroll) {
      background-color: unset;
    }
  }

  .salesVolume {
    display: flex;
    align-items: center;

    .icon {
      display: flex;
      align-items: center;
      // flex-direction: column;
      transform: rotate(90deg);
      margin-bottom: 10rpx;

      .iconfont {
        font-size: 16rpx;
        margin-left: 10rpx;
        font-weight: 800;
      }
    }
  }
}

.container {
  padding: 25rpx 18rpx;
  padding-top: 0;
  background-color: #efefef;
  min-height: 80vh;
  margin-bottom: 30rpx;
  margin-top: 25rpx;

  .awp {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .row {
      width: 340rpx;
      // border: 1px solid red;
      margin-bottom: 25rpx;

      // 奇数
      &:nth-child(odd) {
        margin-right: 10rpx;
      }

      // 偶数
      &:nth-child(even) {
        margin-left: 10rpx;
      }

      .img {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .oneComboMeal {
        color: #b61b42;
        margin-top: 15rpx;
        margin-bottom: 6rpx;
        font-size: 28rpx;
        font-weight: 700;
      }

      .info {
        display: flex;
        justify-content: space-between;

        .money {
          color: #ffb61e;
        }

        .love {
          display: flex;
          align-items: center;

          .count {
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.wrap {
  padding: 0rpx;

  :deep(.u-loadmore) {
    margin-bottom: 7px;
    margin-top: 4px;
  }
}
</style>
